

    <div class="container">
        <h2><%= gettext("Glimesh Funding Progress") %></h2>
        <div class="progress progress-bar-stack mb-4 br-30" style="height: 32px">
            <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"><%= gettext("Platform Subs") %></div>
            <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"><%= gettext("Streamer Subs") %></div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="pricing-plans-container mt-5 d-md-flex d-block">
                    <!-- Plan -->
                    <div class="pricing-plan mb-5">
                        <h3>Lil Meshi</h3>
                        <p class="margin-top-10"><%= gettext("Help us fund the platform & grow!") %></p>
                        <div class="pricing-plan-label billed-monthly-label"><strong>$5</strong>/ <%= gettext("monthly") %></div>
                        <div class="pricing-plan-label billed-yearly-label"><strong>$290</strong>/ <%= gettext("yearly") %></div>
                        <div class="pricing-plan-features mb-4">
                            <strong><%= gettext("Cosmetic Features") %></strong>
                            <ul>
                                <li>Colored Avatar Ring</li>
                                <li>Animated Emotes</li>
                            </ul>
                        </div>
                        <a href="javascript:void(0);" class="button btn btn-default btn-block margin-top-20"><%= gettext("Select") %></a>
                    </div>
                    <!-- Plan -->
                    <div class="pricing-plan mb-5 mt-md-0 recommended">
                        <div class="recommended-badge"><%= gettext("Popular!") %></div>
                        <h3>Founder</h3>
                        <p class="margin-top-10"><%= gettext("Support Glimesh's future with your wallet! Get special perks to show off.") %></p>
                        <div class="pricing-plan-label billed-monthly-label"><strong>$25</strong>/ <%= gettext("monthly") %></div>
                        <div class="pricing-plan-label billed-yearly-label"><strong>$670</strong>/ <%= gettext("yearly") %></div>
                        <div class="pricing-plan-features mb-4">
                            <strong><%= gettext("Cosmetic Features") %></strong>
                            <ul>
                                <li>Founder Badge</li>
                                <li>Animated Avatar Ring</li>
                                <li>5 Custom Emotes</li>
                            </ul>
                        </div>
                        <a href="javascript:void(0);" class="button btn btn-default btn-block margin-top-20"><%= gettext("Select") %></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card">
                  <div class="card-body">
                    <%= if @has_platform_subscription do %>
                    <h4><%= gettext("You're subscribed!") %></h4>
                    <h6><%= gettext("Thanks for supporting Glimesh :D") %></h6>

                    <div class="text-center mt-4 mb-4">
                        <img src="/images/glimcons/GlimberryPie.png" alt="" class="img-fluid">
                    </div>

                    <%= if @stripe_error do %>
                        <p><%= @stripe_error %></p>
                    <% end %>

                    <button class="btn btn-danger btn-block" phx-click="cancel-subscription" phx-throttle="1000"><%= gettext("Cancel Subscription") %></button>

                    <% else %>
                        <%= live_component @socket, GlimeshWeb.SubscriptionComponent, id: "subscription-component", type: :platform, user: @user %>

                        <img src="/images/stripe-badge-white.png" alt="We use Stripe as our payment provider." class="img-fluid mt-4">
                    <% end %>
                  </div>
                </div>
            </div>
        </div>
    </div>
